<%-- 
    Document   : viewtree
    Created on : Sep 15, 2011, 7:54:52 PM
    Author     : bi
--%>

<%@page import="BussinessLayer.MembersFactory"%>
<%@page import="DTO.Member.Members"%>
<%@page import="DTO.Member.Members"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <c:set var="chkCurMember" value="${sessionScope.USER}"/>
        <c:if test="${empty chkCurMember}">
            <c:redirect url="index.jsp"/>
        </c:if>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <title>View Tree</title>

        <style type="text/css">
            .hidden
            {
                display: none;
            }
        </style>

        <script type="text/javascript">
            function autoGenXml(){
            <%
                        String realPath = getServletContext().getRealPath("/") + "WEB-INF/";
                        Members mem = new Members();
                        try {
                            mem = (Members) session.getAttribute("USER");
                            MembersFactory memFac = new MembersFactory();
                            memFac.genXmlFromDB(mem, realPath);
                        } catch (Exception ex) {
                        }
            %>
            }
            
            // set listMember from session
            var listMember = <%= session.getAttribute("treeJson")%>;

            var hasClass = function(element,cls) {
                return element.className.indexOf(cls) > -1;
            }

            var addClass = function(element,cls) {
                if (!this.hasClass(element,cls)) element.className += " "+cls;
            }

            var removeClass = function(element,cls) {
                if (hasClass(element,cls)) {
                    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
                    element.className=element.className.replace(reg,' ');
                }
            }
        
            var getElementsByClass = function(theClass) {
                var allPageTags=document.getElementsByTagName("*");
                var returnTags = [];
                for (i=0; i<allPageTags.length; i++) {
                    if (hasClass(allPageTags[i], theClass)) {
                        returnTags.push(allPageTags[i]);
                    }
                }
                return returnTags;
            }

            var drawTree = function (memList, parentNS, level, firstLevel) {
                var tree = document.getElementById("tree");
                for (var i = 0; i < memList.length; i++) {
                    // get direct child
                    // parent is null or memlist[i] is a child of parent
                    if ((!parentNS || memList[i].NameSpace.indexOf(parentNS+".") == 0) && memList[i].NameSpace.split(".").length == level) {
                        var storeDiv = document.createElement("div");
                        storeDiv.id = memList[i].MemId;
                        storeDiv.setAttribute("name", memList[i].NameSpace);
                        storeDiv.style.paddingLeft = (level - firstLevel) * 15 + "px";
                        storeDiv.className = "node expanded";

                        var img = document.createElement("img");
                        img.id = "img" + memList[i].MemId;
                        img.src = "img/minus.gif";
                        img.setAttribute("onclick", "toggle('" + memList[i].NameSpace + "')");
                        storeDiv.appendChild(img);
                    
                        var additionImg = document.createElement("img");
                        additionImg.src = "img/person.png";
                        additionImg.setAttribute("style", "height:16px; width:16px;");
                        storeDiv.appendChild(additionImg);

                        var span = document.createElement("span");
                        span.setAttribute("style", "margin-left:5px; font-weight:bold;");
                        span.innerHTML = memList[i].FullName + " (" + memList[i].MemCode + ")";
                        storeDiv.appendChild(span);

                        tree.appendChild(storeDiv);

                        drawTree(memList, memList[i].NameSpace, level + 1, firstLevel);
                    }
                }
            }

            var initTree = function () {
                drawTree(listMember, null, listMember[0].NameSpace.split(".").length, listMember[0].NameSpace.split(".").length);
            }

            var toggle = function (ns) {
                var div = document.getElementsByName(ns)[0];
                var allDiv = getElementsByClass("node");

                // collapse
                if(hasClass(div, "expanded")) {
                    for (var i=0; i < allDiv.length; i++) {
                        if(allDiv[i].getAttribute("name").indexOf(ns+".") == 0) {
                            addClass(allDiv[i], "hidden");
                            allDiv[i].className.replace("collapsed", "expanded");
                            document.getElementById("img" + allDiv[i].id).src = "img/minus.gif";
                        }
                    }
                    removeClass(div, "expanded")
                    addClass(div, "collapsed");
                    document.getElementById("img" + div.id).src = "img/plus.gif";
                } else if (hasClass(div, "collapsed")) {    // expand
                    for (var i=0; i < allDiv.length; i++) {
                        if(allDiv[i].getAttribute("name").indexOf(ns+".") == 0)
                            removeClass(allDiv[i], "hidden");
                    }
                    removeClass(div, "collapsed")
                    addClass(div, "expanded");
                    document.getElementById("img" + div.id).src = "img/minus.gif";
                }
            }
        </script>

    </head>
    <body class="default" onload="self.setInterval(autoGenXml(), 5 * 1000); initTree();" >
        <div class="logo">MULTI LEVEL MANAGEMENT</div><br/>
        <form action="Controler" method="POST" >
            <table class="buttongroups">
                <tr>
                    <td>
                        <button class="good" type="submit" name="btnAction" value="view"
                                onclick="location.href='viewtree.jsp'">View Tree</button>
                    </td>
                    <td>
                        <button class="quite" type="submit" name="btnAction" value="commission"
                                onclick="location.href='commission.jsp'" >Commission</button>
                    </td>
                    <td>
                        <button class="average" type="submit" name="btnAction" value="add"
                                onclick="location.href='addnew.jsp'">Add New</button>
                    </td>
                    <td>
                        <button class="bad" type="submit" name="btnAction" value="logout">Log Out</button>
                    </td>
                </tr>
            </table>
            <div class="workarea">
                <div id="tree">
                </div>
            </div>
        </form>
    </body>
</html>
